import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { GraduationCap, Trophy, Clock, Target, ArrowRight, CheckCircle } from "lucide-react";
import { UnifiedCard } from "./UnifiedCard";

const eliteTracks = [
  {
    id: "1",
    title: "MIT Study Method",
    university: "Massachusetts Institute of Technology",
    description: "Learn how MIT students structure their weekly goals, manage heavy coursework, and excel in STEM subjects",
    duration: "8-week program",
    studentsFollowing: 1247,
    successRate: "94%",
    keyFeatures: ["Time blocking", "Problem-solving frameworks", "Peer collaboration"],
    difficulty: "Advanced",
    featured: true
  },
  {
    id: "2",
    title: "Oxford Tutorial System",
    university: "University of Oxford",
    description: "Master the art of critical thinking and academic discussion through Oxford's renowned tutorial approach",
    duration: "6-week program",
    studentsFollowing: 892,
    successRate: "91%",
    keyFeatures: ["Critical analysis", "Essay writing", "Debate skills"],
    difficulty: "Intermediate"
  },
  {
    id: "3",
    title: "Stanford Design Thinking",
    university: "Stanford University",
    description: "Apply Stanford's innovative approach to problem-solving and creative project development",
    duration: "4-week program",
    studentsFollowing: 1534,
    successRate: "89%",
    keyFeatures: ["Creative thinking", "Prototyping", "User research"],
    difficulty: "Beginner"
  }
];

const trackComponents = [
  {
    title: "Weekly Goal Structure",
    description: "Learn to set and track weekly objectives like top students",
    icon: Target
  },
  {
    title: "Assessment Timelines",
    description: "Master the art of preparation timing and deadline management",
    icon: Clock
  },
  {
    title: "Project Workflows",
    description: "Understand how elite students approach complex projects",
    icon: CheckCircle
  }
];

export function EliteStudyTracks() {
  const startTrack = (trackTitle: string) => {
    console.log(`Starting elite track: ${trackTitle}`);
    // TODO: Implement track start functionality with Mirror Agent auto-launch
  };

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="text-center">
        <div className="flex items-center justify-center gap-2 mb-4">
          <GraduationCap className="w-8 h-8 text-blue-600" />
          <h3 className="text-2xl font-bold text-blue-900">Elite Study Tracks</h3>
          <Trophy className="w-6 h-6 text-yellow-500" />
        </div>
        <p className="text-blue-700 max-w-2xl mx-auto">
          Learn from the world's top universities. Discover how elite students structure their learning, 
          manage time, and achieve academic excellence.
        </p>
      </div>

      {/* Featured Track */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-6 text-white">
        <div className="flex items-center gap-2 mb-3">
          <Badge className="bg-yellow-500 text-yellow-900 hover:bg-yellow-400">
            🏆 Most Popular Track
          </Badge>
        </div>
        <h4 className="text-xl font-bold mb-2">{eliteTracks[0].title}</h4>
        <p className="text-sm text-blue-200 mb-2">{eliteTracks[0].university}</p>
        <p className="text-blue-100 mb-4">{eliteTracks[0].description}</p>
        <div className="grid grid-cols-3 gap-4 mb-4 text-sm">
          <div>
            <div className="font-semibold">{eliteTracks[0].studentsFollowing}</div>
            <div className="text-blue-200">Students</div>
          </div>
          <div>
            <div className="font-semibold">{eliteTracks[0].successRate}</div>
            <div className="text-blue-200">Success Rate</div>
          </div>
          <div>
            <div className="font-semibold">{eliteTracks[0].duration}</div>
            <div className="text-blue-200">Duration</div>
          </div>
        </div>
        <Button 
          onClick={() => startTrack(eliteTracks[0].title)}
          className="bg-white text-blue-600 hover:bg-blue-50"
        >
          Start Elite Track
          <ArrowRight className="w-4 h-4 ml-2" />
        </Button>
      </div>

      {/* Track Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {eliteTracks.slice(1).map((track) => (
          <UnifiedCard
            key={track.id}
            title={track.title}
            description={track.description}
            subjectLabel={track.university}
            difficultyLevel={track.difficulty}
            topicTags={track.keyFeatures}
            gradeLevel="University Level"
            duration={track.duration}
            subject="Study Methods"
            userCount={track.studentsFollowing}
            onPreview={() => console.log(`Preview track: ${track.title}`)}
            onPrimaryAction={() => startTrack(track.title)}
            primaryActionLabel="Join Track"
            previewLabel="Learn More"
            isHot={track.studentsFollowing > 1200}
            isPriority={track.successRate === "94%"}
          />
        ))}
      </div>

      {/* Track Components Overview */}
      <div className="bg-blue-50 rounded-2xl p-6">
        <h4 className="text-xl font-bold text-blue-900 mb-4">What You'll Master</h4>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {trackComponents.map((component, index) => {
            const IconComponent = component.icon;
            return (
              <div key={index} className="flex items-start gap-3">
                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
                  <IconComponent className="w-4 h-4 text-white" />
                </div>
                <div>
                  <h5 className="font-semibold text-blue-900 mb-1">{component.title}</h5>
                  <p className="text-sm text-blue-700">{component.description}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Explore More CTA */}
      <div className="text-center pt-6 border-t border-blue-200">
        <p className="text-gray-600 mb-4">Ready to study like the world's top students?</p>
        <Button variant="outline" size="lg" className="border-blue-300 text-blue-700 hover:bg-blue-50">
          <Trophy className="w-5 h-5 mr-2" />
          Browse All Elite Programs
          <ArrowRight className="w-5 h-5 ml-2" />
        </Button>
      </div>
    </div>
  );
}
